<!DOCTYPE html>
<html>
    <head>
        <title>jiangcheng is learning Vue</title>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vue-router@4"></script>
    </head>
    <body>
        
        <div id = "app"></div>
        <script type = "text/javascript">
        const app = Vue.createApp({
          myOption: 'hello!',
          methods: {
                bar() {
                console.log('bar')
                },
                conflicting() {
                console.log('from self')
                }
            }
        })
         
        // 为自定义的选项 'myOption' 注入一个处理器。
        app.mixin({
          created() {
            const myOption = this.$options.myOption
            if (myOption) {
              document.write(myOption)
            }
          },
          methods: {
                foo() {
                console.log('foo')
                },
                conflicting() {
                console.log('from mixin')
                }
            }
        })
         
        const vm = app.mount('#app') // => "hello!"
                vm.foo() // => "foo"
        vm.bar() // => "bar"
        vm.conflicting() // => "from self"
        </script>
    </body>
</html>